<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="yearSel" onchange="change()">
			
		</select>
		<select id="monthSel" onchange="change()"></select>
		<select id="daySel"></select>

		<script type="text/javascript">
			// 1. yearSel添加1990-2024
			for (var i = 1990; i <= 2024; i++) {
				// 创建option元素
				var o = document.createElement("option");
				o.value = i;
				// 创建文本节点
				var t = document.createTextNode(i + "年");
				// 文本放入到option元素
				o.appendChild(t);
				// option添加到yearSel中
				yearSel.appendChild(o);
			}
			// 2. monthSel 添加1月-12月		
			for (var i = 1; i <= 12; i++) {
				// 创建option元素
				var o = document.createElement("option");
				o.value = i;
				// 创建文本节点
				var t = document.createTextNode(i + "月");
				// 文本放入到option元素
				o.appendChild(t);
				// option添加到yearSel中
				monthSel.appendChild(o);
			}
			// 3. daySel 添加日期1日-31日	
			for (var i = 1; i <= 31; i++) {
				// 创建option元素
				var o = document.createElement("option");
				// 创建文本节点
				var t = document.createTextNode(i + "日");
				// 文本放入到option元素
				o.appendChild(t);
				// option添加到yearSel中
				daySel.appendChild(o);
			}								
			// 4. 给montSel 和yearSel添加 onChange事件
			function change() {
				console.log("年份或月份改变了，重新生成日期的选项")
				// 清空下拉框之前内容
				daySel.options.length = 0;
				// 根据当前选中的年份月份重新添加日期
				var year = yearSel.value;
				var month = monthSel.value;
				console.log(year+"年"+month+"月");
				

				var monthDay = [31,28,31,30,31,30,31,31,30,31,30,31];
				var dayCount = monthDay[month-1];
				if(month==2 &&(year%400==0 || (year%100!=0&&year%4==0)))// 如果是2月且是闰年需要多加1天
				{
					dayCount++;
				}
				for (var i = 1; i <= dayCount; i++) {
					// 创建option元素
					var o = document.createElement("option");
					// 创建文本节点
					var t = document.createTextNode(i + "日");
					// 文本放入到option元素
					o.appendChild(t);
					// option添加到yearSel中
					daySel.appendChild(o);
				}	

			}
		</script>
	</body>
</html>